<template>
  <div>
    <div class="inputWrapper">
      <input
        @blur="showerr"
        :type="type"
        v-model="value"
        :placeholder="message"
        :class="isOk ? '' : 'err'"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      // 判断信息提示
      isOk: true,
    };
  },
  // 子组件接收
  props: ["message", "type", "regular", "mistake"],
  watch: {
    value(newValue) {
      // 校验
      if (this.regular.test(newValue)) {
        console.log("合法", this.isOk);
        // 打印文本
        this.isOk = true;
      } else {
        console.log(this.mistake, this.isOk);
        this.isOk = false;
      }
      // 通知父组件
      this.$emit("getinform", newValue);
    },
  },
  methods: {
    // 失去焦点
    showerr() {
      if (!this.isOk) {
        this.$toast(this.mistake);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 输入框
.inputWrapper {
  padding-bottom: 16/360 * 100vw;
  input {
    width: 100%;
    height: 48/360 * 100vw;
    line-height: 48/360 * 100vw;
    font-size: 18/360 * 100vw;
    border: none;
    outline: none;
    border-bottom: 1px solid #333;
  }
  .err {
    border-color: #ffc700;
  }
}
</style>